<script>
    import ResourcePanel from "../base/ResourcePanel.svelte";
    import SaveManager from "../../scripts/save/SaveManager.js";
    import {onMount} from "svelte";
    import {mapEventBus} from "../../eventbus/map_signal.js";
    import RoundWheelManager from "../../scripts/round/RoundWheelManager.js";

    let resources = {};
    let saveManager;



    onMount(() => {
        saveManager = new SaveManager(window);
        loadResources();

        // 监听资源更新事件
        mapEventBus.on('resource-update', loadResources);

        // 监听下一个回合时间
        mapEventBus.on("next-round",  nextRound)
    });

    function nextRound() {
        let round_wheel = RoundWheelManager.nextRound(); // 直接发送下一回合
    }

    function loadResources() {
        const playData = saveManager.load_data('play');
        const allResources = saveManager.load_data('resource');

        // console.log(playData, allResources)
        if (playData && allResources) {
            resources = allResources[playData.power] || {};
            delete resources['cities']
            delete resources['build_config']
        }
    }
</script>
{#if resources}
    <div class="player-resource-panel">
        <ResourcePanel bind:resources={resources} showTitle={false}/>
    </div>
{/if}
<div class="next-round" on:click={()=>{
    RoundWheelManager.triggerNextRound();
}}>
    <div>继续</div>
    <div>回合</div>
</div>

<style lang="less">
  @round-size: 40px;
  .next-round {
    cursor: pointer;
    user-select: none;
    flex-wrap: wrap;
    flex-direction: column;
    font-size: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: green;
    color: white;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    margin: 2px;
    position: fixed;
    bottom: 20px;
    right: 20px;
    border-radius: 50%;
    width: @round-size;
    height: @round-size;
    transition: .5s ease-in-out;

    &:hover {
      background: #408940;
    }
  }

</style>